<template>
  <div class="videocommentbox">
    <div class="videocommentboxbg" @click.stop="hidevideocomment" v-show="show"></div>
    <div :class="['videocommentlist',{'show':show}]">
      <div class="content">
        <div class="commentdetail">
          <div class="detailtop">
            <div>评论区</div>
            <div class="detailtopright">
              <div :class="{'con':commentSortType==1}" @click.stop="change(1)">推荐</div>
              <div>&nbsp;|&nbsp;</div>
              <div :class="{'con':commentSortType==2}" @click.stop="change(2)">最热</div>
              <div>&nbsp;|&nbsp;</div>
              <div :class="{'con':commentSortType==3}" @click.stop="change(3)">最新</div>
            </div>
          </div>
          <van-list class="personcomment" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="mainbox" v-for="(ele,index) in commentlist" :key="index">
              <div class="imgbox" v-if="ele.user">
                <img :src="ele.user.avatarUrl" alt />
              </div>
              <div class="namebox" v-if="ele.user">
                <div>{{ele.user.nickname}}</div>
                <div class="date">{{ele.timeStr}}</div>
                <div class="text">{{ele.content}}</div>
                <div class="reply" v-if="ele.showFloorComment.replyCount!=0">
                  {{ele.showFloorComment.replyCount}}条回复
                  <i class="iconfont icon-you"></i>
                </div>
              </div>
              <div class="likebox">
                <div>{{ele.likedCount}}</div>
                <div class="icon" @click.stop="like(index,ele.commentId)">
                  <i :class="['iconfont',{'icon-dianzan1':ele.liked}]"></i>
                  <i :class="['iconfont',{'icon-dianzan':!ele.liked}] "></i>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewSongComment } from "../assets/api/comment.js";
export default {
  props: ["show", "cid"],
  data() {
    return {
      commentSortType: 1,
      commentlist: [],
      offset: 1,
      loading: false,
      finished: false,
      cursor: 0,
    };
  },
  methods: {
    hidevideocomment() {
      this.$emit("hidevideocommentson");
    },
    change(type) {
      this.commentSortType = type;
      this.commentlist = [];
      this.offset = 1;
      this.finished = false;
      this.onLoad();
    },
    onLoad() {
      if (this.commentSortType == 1) {
        getNewSongComment({
          id: this.cid,
          type: 5,
          pageNo: this.offset,
          sortType: this.commentSortType,
        }).then((data) => {
          if (data.data) {
            this.commentlist.push(...data.data.comments);
          }
          else{
            this.finished = true;
          }
          this.loading = false;
          if (this.commentlist.length >= data.totalCount) {
            this.finished = true;
          }
        });
      } else if (this.commentSortType == 2) {
        if (this.offset == 1) {
          getNewSongComment({
            id: this.cid,
            type: 5,
            pageNo: this.offset,
            sortType: this.commentSortType,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            this.finished = true;
          });
        }
      } else if (this.commentSortType == 3) {
        if (this.offset == 1) {
          getNewSongComment({
            id: this.cid,
            type: 5,
            pageNo: this.offset,
            sortType: this.commentSortType,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            if (this.commentlist.length >= data.totalCount) {
              this.finished = true;
            }
            this.cursor = data.data.cursor;
          });
        } else {
          getNewSongComment({
            id: this.cid,
            type: 5,
            pageNo: this.offset,
            sortType: this.commentSortType,
            cursor: this.cursor,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            if (this.commentlist.length >= data.totalCount) {
              this.finished = true;
            }
            this.cursor = data.data.cursor;
          });
        }
      }
      this.offset += 1;
    },
  },
  watch: {
    cid() {
      this.commentlist = [];
      this.offset = 1;
      this.finished = false;
      this.onLoad();
    },
  },
};
</script>

<style lang="less">
.videocommentboxbg {
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.videocommentlist {
  transition: all 0.2s ease-in-out;
  overflow-y: scroll;
  width: 100%;
  height: 75%;
  position: fixed;
  bottom: -80%;
  z-index: 1000;
  margin: auto;
  left: 0;
  right: 0;
  &.show {
    bottom: 0px;
    &::before {
      bottom: 0px;
    }
  }
  &::before {
    width: 100%;
    height: 75%;
    transition: all 0.3s ease-in-out;
    content: " ";
    z-index: -1;
    right: 0;
    bottom: -80%;
    left: 0;
    position: fixed;
    margin: 0 auto;
    filter: blur(1.5px);
    background: url(../assets/imgs/bg.jpg) rgba(0, 0, 0, 0.2) center 0 no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
  }
  .content {
    .commentdetail {
      background-color: rgba(255, 255, 255, 0.08);
      padding: 14px 16px;
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.9);
      .detailtop {
        display: flex;
        justify-content: space-between;
        .detailtopright {
          color: rgba(255, 255, 255, 0.5);
          display: flex;
          .con {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
      .personcomment {
        box-sizing: border-box;
        padding: 10px 0px 15px;
        .mainbox {
          display: flex;
          padding-bottom: 16px;
          padding-top: 12px;
          position: relative;
          &::after {
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            width: 88%;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.1);
          }
          //   align-items: center;
          .imgbox {
            flex: 0 0 36px;
            width: 36px;
            height: 36px;
            border-radius: 100%;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          .namebox {
            flex: 1;
            margin-left: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            .date {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.5);
            }
            .text {
              margin: 12px 0;
              font-size: 14px;
              letter-spacing: 1px;
            }
            .reply {
              color: #74b4da;
              font-size: 13px;
            }
          }
          .likebox {
            display: flex;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            height: 36px;
            line-height: 36px;
            div {
              height: 100%;
            }
            .icon {
              margin-left: 6px;
              line-height: 33px;
            }
          }
        }
      }
    }
  }
}
</style>